
<template>
  <div class="page-content">
    <div class="page-title mb-3">
      <div class="row justify-content-between align-items-center">
        <div class="col-md-6 mb-3 mb-md-0">
          <h5 class="h3 font-weight-400 mb-0 text-white">Students</h5>
          <span class="text-sm text-white opacity-8"
            >一共有 <b class="total">{{ sList.length }}</b> 位学员</span
          >
        </div>
        <div
          class="col-md-6 d-flex align-items-center justify-content-between justify-content-md-end"
        >
          <!-- 
                      data-bs-toggle="modal"
                  data-bs-target="#modal"
               -->
          <el-button
            @click="openModal"
            type="primary"
            icon="el-icon-edit"
            circle
          >
          </el-button>
        </div>
      </div>
    </div>
    <el-table :data="sList" stripe style="width: 100%" class="app">
      <el-table-column prop="name" label="姓名" width="90"> </el-table-column>
      <el-table-column prop="age" label="年龄" width="90"> </el-table-column>
      <el-table-column prop="gender" label="性别" width="90">
        <template slot-scope="scope">
          <span v-if="scope.row.gender === 1">男</span>
          <span v-else-if="scope.row.gender === 0">女</span>
        </template>
      </el-table-column>
      <el-table-column prop="group" label="组号" width="90"> </el-table-column>
      <el-table-column prop="hope_salary" label="期望薪资" width="90">
      </el-table-column>
      <el-table-column prop="salary" label="就业薪资" width="90">
      </el-table-column>
      <el-table-column property="province,city,area" label="籍贯">
        <template slot-scope="scope">
          {{ scope.row.province }}{{ scope.row.city }}{{ scope.row.area }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" #default="{ row }">
        <el-button type="primary" icon="el-icon-edit"></el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="delBtn(row.id)"
        ></el-button>
      </el-table-column>
    </el-table>

    <!-- 抽屑弹出框 -->
    <el-drawer
      title="添加学员"
      :visible.sync="drawer"
      direction="rtl"
      size="60%"
    >
      <el-form ref="form" v-model="form.name" prop="name" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="gender">
          <el-radio v-model="form.gender" label="0">男</el-radio>
          <el-radio v-model="form.gender" label="1">女</el-radio>
        </el-form-item>

        <el-form-item label="年龄" prop="age">
          <el-input
            v-model.number="form.age"
            placeholder="请输入年龄"
          ></el-input>
        </el-form-item>

        <el-form-item label="组别" prop="group">
          <el-select v-model.number="form.group" placeholder="请选择小组">
            <el-option label="1组" value="1"></el-option>
            <el-option label="2组" value="2"></el-option>
            <el-option label="3组" value="3"></el-option>
            <el-option label="4组" value="4"></el-option>
            <el-option label="5组" value="5"></el-option>
            <el-option label="6组" value="6"></el-option>
            <el-option label="7组" value="7"></el-option>
            <el-option label="8组" value="8"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="期望薪资" prop="hope_salary">
          <el-input
            v-model.number="form.hope_salary"
            placeholder="请输入期望薪资"
          ></el-input>
        </el-form-item>

        <el-form-item label="就业薪资" prop="salary">
          <el-input
            v-model.number="form.salary"
            placeholder="请输入就业薪资"
          ></el-input>
        </el-form-item>

        <el-form-item label="籍贯" prop="province">
          <!-- 省 -->
          <el-select
            v-model="form.province"
            placeholder="请选择省"
            @change="provinceChange(form.province)"
          >
            <el-option
              v-for="(item, index) in Province"
              :key="index"
              :value="item"
            >
            </el-option>
          </el-select>
          <!-- 市 -->
          <el-select
            v-model="form.city"
            placeholder="请选择市"
            @change="cityChange(form.province, form.city)"
          >
            <el-option v-for="(item, index) in City" :key="index" :value="item">
            </el-option>
          </el-select>
          <!-- 区 -->
          <el-select v-model="form.area" placeholder="请选择区">
            <el-option v-for="(item, index) in Area" :key="index" :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-button type="primary" @click="addSubmit(form)">添加</el-button>
        <el-button @click="close">取消</el-button>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { delStudentAPI } from "@/api/students";
import { mapActions, mapMutations, mapState } from "vuex";
import { areaAPI } from "@/api/place";
export default {
  data() {
    return {
      drawer: false,
      form: {
        name: "",
        gender: "",
        age: "",
        group: "",
        hope_salary: "",
        salary: "",
        province: "",
        city: "",
        area: "",
      },
    };
  },

  computed: {
    ...mapState("students", ["sList"]),
    ...mapState("place", ["Province", "City", "Area"]),
  },
  methods: {
    ...mapMutations("students", ["studentsList"]),
    ...mapActions("students", ["initDataJs", "addStudent"]),

    ...mapMutations("place", ["getAreaJs"]),
    ...mapActions("place", ["getProvince", "getCity", "getArea"]),
    // 打开模态框
    openModal() {
      this.drawer = true;
      this.getProvince();
    },

    // 省改变
    provinceChange(item) {
      this.getCity(item);
    },
    // 市改变
    async cityChange(pro, city) {
      // this.getArea(pro, city);
      const res = await areaAPI(pro, city);
      console.log(res);
      this.getAreaJs(res.data.data);
    },
    // 确认添加
    addSubmit(form) {
      const {
        name,
        gender,
        age,
        group,
        hope_salary,
        salary,
        province,
        city,
        area,
      } = this.form;
      const data = {
        name,
        gender: +gender,
        age: +age,
        group: +group,
        hope_salary: +hope_salary,
        salary: +salary,
        province,
        city,
        area,
      };
      this.addStudent(data);
      this.close();
      this.initDataJs();
    },
    // 关闭
    close() {
      this.drawer = false;
      this.form = {
        name: "",
        gender: "",
        age: "",
        group: "",
        hope_salary: "",
        salary: "",
        province: "",
        city: "",
        area: "",
      };
    },
    // 删除
    delBtn(id) {
      delStudentAPI(id);
      this.$message.success("删除成功！");
      this.initDataJs();
    },
  },
  created() {
    this.initDataJs();
  },
};
</script>

<style scoped>
.app {
  border-radius: 7px;
}
.text {
  font-size: 12px;
  margin: 0;
  padding: 5px 20px;
  color: #999;
}
.card i:hover {
  cursor: pointer;
}
.bt-1 {
  margin-top: 4px;
}
.card-fluid {
  border: none;
  padding: 15px;
}
.card .table th {
  border-color: transparent;
}
.form-group {
  display: flex;
  align-items: center;
  height: calc(1.5em + 1.5rem + 2px);
}
.form-group > label {
  width: 100px;
  text-align: right;
  padding-right: 10px;
  margin-bottom: 0;
}
.form-group > input {
  flex: 1;
}
.form-group .input {
  flex: 1;
  padding-left: 10px;
  display: flex;
}
.form-group .form-check {
  margin-bottom: 0;
  margin-right: 30px;
}
.form-group .input select {
  width: 140px;
  margin-right: 20px;
}
.custom-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23999999' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-size: 12px 12px;
}
</style>